<template>
  <div class="funnel-chat-container" ref="funnel-chart" ></div>
</template>
<script>
import echarts from "echarts";
import opt,{handlerOptions } from "./config.js";
let that;
export default {
  name: "data-v-funnel",
  props: {
    chartOptions: {
      type: Object,
      default: () => {},
    },
    chartType: {
      type: Number,
      default:1,
    },
    optionParams:{
      type:Object,
      default:()=>{}
    }
  },
  watch: {
    chartOptions: (newVal) => {
      that.setOptions(newVal);
    },  
  },
  data() {
    return {
      opt,
      chart: null,
      circle: null,
    };
  },
  methods: {
    init() {
      const dom = this.$refs["funnel-chart"];
      this.chart = echarts.init(dom);
      this.chart.setOption(this.opt['option'+this.chartType]({...this.optionParams}));
      window.addEventListener("resize",this.chart.resize);
    },
    setOptions(newConfig) {
      handlerOptions(this.chart, newConfig);
    },
  },
  created() {
    that = this;
  },
  mounted() {
    this.init();
  },
};
</script>
<style src='./index.css' scoped></style>